<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- 
           <link rel="stylesheet" type="text/css" href="css/styles.css"/>
          <link href="/favicon.ico" rel="icon" type="image/x-icon" />
         
          <script  type="text/javascript" src="js/scripts.js"></script>
         -->
   </head>
  
  
  <script type="text/javascript">
  </script>
  <body>
  <!--
  <input/>
  <button id="but">登录</button>
  -->
  <div id="t">
    <div id="t1"></div>
    <div id="t2"></div>
    <div id="t3"></div>
  
  </div>

  <div class="time">
          <h3 id="ss1"></h3>
    时 --><div> <p id="s1"></p> </div>
          <h3 id="ss2"></h3>
    分 --><div> <p id="s2"></p> </div>
          <h3 id="ss3"></h3>
    秒 --><div> <p id="s3"></p> </div>
  </div>
  
  <p>人生的时间就那么多,但是人的时间概念并不是每一个都非常强大</p>
  <p>如果以数据的方式呈现出来，是否能感到时间的紧迫呢？</p>
  
  </body>
  <script>
  /*
  let but = document.getElementById('but');
  let time;
  but.onclick = function(){
  this.disabled = true;
  this.innerHTML = '还剩下6秒';
  let num = 6;
  time = setInterval(()=>{
  if(num == 0){
  this.disabled = false;
  clearInterval(time)
  this.innerHTML = '登录';
  }else{
   this.innerHTML = '还剩下'+num+'秒';
  num--
  }
 
  },1000)
  }
  */
  
  let t = document.getElementById('t');
  let t1 = document.getElementById('t1');
  let t2 = document.getElementById('t2');
  let t3 = document.getElementById('t3');
  
  let s1 = document.getElementById('s1');
  let s2 = document.getElementById('s2');
  let s3 = document.getElementById('s3');
  
  let ss1 = document.getElementById('ss1');
  let ss2 = document.getElementById('ss2');
  let ss3 = document.getElementById('ss3');
  
  let date = new Date();
  let dates = new Date(String(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+(date.getDate())+' 24:0'))
  function ts(){
  let time =  new Date();
  let times = (dates-time)/1000;
  let ms = times/60 /60 %24
  let timesArr = [ms,times/60 %60,times%60]
  t1.innerHTML = parseInt(timesArr[0])
  t2.innerHTML = parseInt(timesArr[1])
  t3.innerHTML = parseInt(timesArr[2])
  let buf1 = (timesArr[0].toFixed(3)/60)*100+'%'
  let buf2 = (timesArr[1].toFixed(3)/60)*100+'%'
  let buf3 = (timesArr[2].toFixed(3)/60)*100+'%'
  s1.style.width = buf1
  s2.style.width = buf2
  s3.style.width = buf3
  
  ss1.innerText = buf1
  ss2.innerText = buf2
  ss3.innerText = buf3
}
  ts(dates);
  setInterval(()=>{
  ts(dates);
  },1000)
  </script>
  
  <style>
  #t{
  width:180px;
  height:50px;
  background-color:#abf;
  text-align:center;
  font-size:25px;
  color:#fb0;
  border:#0fa 3px double;
  }
   #t1{
  width:30%;
  height:40px;
  background-color:#aff;
  float:left;
  margin:4px;
  border-top:#000 2px outset;
  border-bottom:#000 2px outset;
  }
   #t2{
  width:30%;
  height:40px;
  background-color:#aff;
  float:left;
  margin:4px 0;
  border-top:#000 2px outset;
  border-bottom:#000 2px outset;
  }
   #t3{
  width:30%;
  height:40px;
  background-color:#aff;
  float:left;
  margin:4px;
  border-top:#000 2px outset;
  border-bottom:#000 2px outset;
  }
  
  .time div{
  height:20px;
  border:#0fa 3px double;
  margin:4px;
  }
  .time p{
  height:80%;
  width:0.01%;
  background-color:#000;
  margin:2px 0;
  }
  .time h3{
  border:#0fa 3px solid;
  height:10px;
  width:35%;
  float:right;
  margin:0;
  font-size:9px;
  }
  </style>
</html>		
	
